<template>
  <div>
    <el-dialog
      title="服务夜班加班费详情预览"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>
        <div class="ifam">
          <div class="main">
            <div class="card">
              <div class="top">
                <!-- <div class="money">￥200.00</div> -->
                <!-- <div class="title_1">
                  {{ commodityMsg.good.pinpai | changeprice}}
                </div> -->
              </div>
              <!-- <div class="nav">
                <div>库存100件</div>
                <div class="rightText">
                  销量{{ commodityMsg.good.salesvolume | changeprice}}件
                </div>
              </div> -->
              <div class="nav">
                <div style="margin-left: 7px">0点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price0 | changeprice }}
                  </div>
                </div>
                <div style="margin-left: 7px">0点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price30 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div style="margin-left: 7px">1点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price1 | changeprice }}
                  </div>
                </div>
                <div style="margin-left: 7px">1点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price83 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>2点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price2 | changeprice }}
                  </div>
                </div>
                <div>2点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price93 | changeprice }}
                  </div>
                </div>
              </div>

              <div class="nav">
                <div>3点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price3 | changeprice }}
                  </div>
                </div>
                <div>3点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price103 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>4点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price4 | changeprice }}
                  </div>
                </div>
                <div>4点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price113 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>5点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price5 | changeprice }}
                  </div>
                </div>
                <div>5点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price123 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>6点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price6 | changeprice }}
                  </div>
                </div>
                <div>6点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price130 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>7点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price7 | changeprice }}
                  </div>
                </div>
                <div>7点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price133 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>8点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price8 | changeprice }}
                  </div>
                </div>
                <div>8点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price143 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>9点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price9 | changeprice }}
                  </div>
                </div>
                <div>9点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price153 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>10点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price10 | changeprice }}
                  </div>
                </div>
                <div>10点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price163 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>11点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price11 | changeprice }}
                  </div>
                </div>
                <div>11点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price173 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>12点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price12 | changeprice }}
                  </div>
                </div>
                <div>12点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price183 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>13点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price13 | changeprice }}
                  </div>
                </div>
                <div>13点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price193 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>14点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price14 | changeprice }}
                  </div>
                </div>
                <div>14点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price203 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>15点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price15 | changeprice }}
                  </div>
                </div>
                <div>15点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price213 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>16点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price16 | changeprice }}
                  </div>
                </div>
                <div>16点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price223 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>17点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price17 | changeprice }}
                  </div>
                </div>
                <div>17点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price230 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>18点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price18 | changeprice }}
                  </div>
                </div>
                <div>18点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price233 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>19点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price19 | changeprice }}
                  </div>
                </div>
                <div>19点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price330 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>20点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price20 | changeprice }}
                  </div>
                </div>
                <div>20点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price430 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>21点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price21 | changeprice }}
                  </div>
                </div>
                <div>21点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price530 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>22点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price22 | changeprice }}
                  </div>
                </div>
                <div>22点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price630 | changeprice }}
                  </div>
                </div>
              </div>
              <div class="nav">
                <div>23点额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price23 | changeprice }}
                  </div>
                </div>
                <div>23点30额外夜班费用：</div>
                <div>
                  <div style="margin-left: -10px; color: red">
                    {{ commodityMsg.price730 | changeprice }}
                  </div>
                </div>
              </div>
            </div>

            <!-- <div class="content" v-html="commodityMsg.good.content"></div> -->
          </div>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getservenightinfo } from "@/api/server";
export default {
  data() {
    return {
      dialogVisible: false,
      commodityMsg: {},
    };
  },
  mounted() {},
  methods: {
    preview(val) {
      this.dialogVisible = true;
      this.preview11(val);
    },
    async preview11(record) {
      let result = await ({ serveid: record.id });
      console.log(result);
      if (result.code == 0) {
        console.log(result);
        this.commodityMsg = result.data;
        console.log(this.commodityMsg);
      }
    },
  },
  filters: {
    changeprice(val) {
      if (val == 0) {
        return "没有";
      } else {
        return val;
      }
    },
  },
};
</script>

<style scoped>
.ifam {
  width: 355px;
  height: 654px;
  background: url(../../../assets/phonebg.png) no-repeat top;
  background-size: 344px 644px;
  padding: 40px 10px;
  padding-top: 50px;
  margin: 0 auto;
}
.ifam .content {
  height: auto !important;
}
.main {
  height: 560px;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: hidden;
  overflow-y: auto;
}

.main::-webkit-scrollbar {
  width: 8px;
  margin-left: 10px;
}

.main::-webkit-scrollbar-thumb {
  background: #ececec;
  border-radius: 5px;
}

.main::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px white;
  border-radius: 5px;
  background: white;
}

.card {
  padding: 10rpx 20rpx;
}

.money {
  color: #fd502f;
  font-size: 18px;
  font-weight: bold;
}

.title_1 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
}

.top > * {
  padding: 5px;
}

.rightFlex > * {
  padding: 5px 0px;
}
</style>
